<template>
	<view class="tabsWrap">
		<uv-form-item prop="articleType">
			<CommonTabs :modelValue="modelIndex" :tabs="tabs" @update:modelValue="changeValue" />
		</uv-form-item>
	</view>
</template>

<script setup>
	import {
		computed,
		ref,
		toRef,
		watch
	} from "vue";
	import CommonTabs from '/components/common/tabs.vue'
	
	import { publishType as tabs } from '/utils/enums/index.js'

	const props = defineProps({
		modelValue: {
			type: Object,
			default: () => {}
		}
	})
	const emit = defineEmits(['update:modelValue'])

	const modelValue = toRef(props, 'modelValue')
	// tabs组件用的是index做下标，但是数据用的是id，所以这里做一个转换
	const modelIndex = computed(() => {
		return tabs.findIndex(item => item.id === modelValue.value.articleType)
	})

	const changeValue = (value) => {
		emit('update:modelValue', {
			...props.modelValue,
			articleType: tabs[value].id
		})
	}
</script>

<style lang="scss">
	.tabsWrap {
		display: flex;
		justify-content: space-around;
		background: #fff;
	}
</style>